<template>
  <uni-popup ref="popup" type="center" :is-mask-click="false">
    <view class="payment-dialog">
      <!-- 标题 -->
      <view class="dialog-title">微信支付</view>
      
      <!-- 二维码区域 -->
      <view class="qrcode-container">
        <image 
          :src="qrcodeUrl" 
          mode="aspectFit" 
          class="qrcode-image"
          @error="handleQrcodeError"
        />
      </view>
      
      <!-- 提示文字 -->
      <view class="payment-tips">
        请用开发者本人微信（{{ wechatNickname }}）扫描以上二维码进行支付调试</view>
      
      <!-- 操作按钮 -->
      <view class="dialog-actions">
        <button class="cancel-btn" @click="closeDialog">取消支付</button>
        <button class="confirm-btn" @click="confirmPayment">已完成支付</button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  qrcodeUrl: {
    type: String,
    required: true
  },
  wechatNickname: {
    type: String,
    default: '微信用户'
  }
})

const emit = defineEmits(['confirm'])
const popup = ref(null)

// 打开弹窗
const openDialog = () => {
  popup.value.open()
}

// 关闭弹窗
const closeDialog = () => {
  popup.value.close()
}

// 确认支付
const confirmPayment = () => {
  closeDialog()
  emit('confirm')
}

// 二维码加载失败处理
const handleQrcodeError = () => {
  uni.showToast({
    title: '二维码加载失败',
    icon: 'none'
  })
}

defineExpose({ openDialog, closeDialog })
</script>

<style lang="scss" scoped>
.payment-dialog {
  width: 80vw;
  max-width: 600rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dialog-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.qrcode-container {
  width: 400rpx;
  height: 400rpx;
  margin: 20rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 8rpx;
}

.qrcode-image {
  width: 100%;
  height: 100%;
}

.qrcode-placeholder {
  color: #999;
  font-size: 28rpx;
}

.payment-tips {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  margin: 30rpx 0;
  line-height: 1.5;
}

.dialog-actions {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
}

.cancel-btn, .confirm-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 30rpx;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
  margin-right: 20rpx;
}

.confirm-btn {
  background-color: #07C160;
  color: white;
}
</style>